<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-title" content="云桌面">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>云桌面</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="manifest" href="manifest.json">
    <script>
        window.yluiVersion = '';
        document.write('<link rel="stylesheet" href="./res/css/loading.css"/>');
        document.write('<script src="res/yl.js"><\/script>');
        document.write('<script src="onLoad.js"><\/script>');
    </script>
</head>

<body style="padding: 0;margin: 0;background: black">
    <div id="loading">
        <div class="box" id="loading-box">
            <p class="title"><span id="loading-software-name"></span> <span id="loading-lang-init"></span></p>
            <p id="on-load-file-name">...</p>
            <div class="circle-box">
                <div class="circle"></div>
                <div id="text-percent">0</div>
                <div class="mask right">
                    <div id="loading-right" class="circle right"></div>
                </div>
                <div class="mask left">
                    <div id="loading-left" class="circle left"></div>
                </div>
            </div>
        </div>
        <p id="loading-powered-by"></p>
    </div>
    <!--图标模板-->
    <script type="text/x-template" id="tpl-icon">
    <div :class="[drawer?'icon-drawer-pre':'icon']" :style="{background:nobg?'none':icon.bg}">
        <template v-if="icon.type==='str'">
            {{icon.content.substr(0, 1)}}
        </template>
        <i v-if="icon.type==='fa'" class="fa fa-fw"
           :class="[ 'fa-'+icon.content ]">
        </i>
        <template v-if="icon.type==='img'">
            <img ondragstart="return false;" class="fa" :src="img?img:icon.content"
                 onerror="this.src='./res/img/icon/error.png'"/>
        </template>
        <div class="badge" v-show="badge">{{badgeText(badge)}}</div>
    </div>
</script>

    <!--菜单模板-->
    <script type="text/x-template" id="tpl-menu">
    <div class="menu" @contextmenu.self="onMainContextMenu($event)">
        <yl-menu-item
                class="animated fadeInUp"
                :style="{'animation-duration': '0.3s', 'animation-delay': index*0.05+'s'}"
                v-for="(item, id, index) in menu"
                :open="true"
                :item="item"
                :itemid="id"
                :depth="0"
                @itemclick="onItemClick($event)"
                @itemcontextmenu="onItemContextMenu($event)"
                :apps="apps">
        </yl-menu-item>
    </div>
</script>
    <script type="text/x-template" id="tpl-menu-item">
    <div>
        <div class="item"
             @contextmenu="onContextMenu($event)"
             :class="{open:open}" @click="click">
            <span :style="{'margin-left':depth*15+'px'}"></span>
            <yl-icon v-if="!item.children" :icon="apps[item.app].icon"></yl-icon>
            <div v-else class="icon-drawer">
                <template v-for="(c1, id1) in item.children">
                    <yl-icon v-if="!c1.children" :icon="apps[c1.app].icon" :badge="0" class="icon-drawer-pre"
                             :drawer="true"></yl-icon>
                </template>
            </div>
            <span class="title">{{item.title}}</span>
            <div v-if="item.children" class="arrow" :class="{open:item.open}">
                <i class="fa fa-fw fa-angle-up"></i>
                <i class="fa fa-fw fa-angle-down"></i>
            </div>
        </div>
        <yl-menu-item
                v-if="item.children"
                v-for="(subItem, subId) in item.children"
                :item="subItem"
                :itemid="subId"
                :depth="depth+1"
                :open="item.open&&open"
                @itemclick="onItemClick($event)"
                @itemcontextmenu="onItemContextMenu($event)"
                :apps="apps">
        </yl-menu-item>
    </div>
</script>
    <div id="yl" :class="{'small-screen':runtime.isSmallScreen,'horizontal-screen':runtime.isHorizontalScreen}"
        style="display: none;opacity: 0" unselectable="on" v-show="ready">
        <!--桌面 图标 抽屉 窗体-->
        <div class="desktop " :style="{top:configs.topTaskBar?40+'px':0}">
            <!--图标-->
            <div class="shortcut" :class="shortcutClass(id,s)" v-for="(s, id) in shortcuts" :key="id"
                @mousedown="shortcutMouseDown(id,null, $event)" @touchstart="shortcutMouseDown(id,null, $event)"
                v-show="runtime.shortcutsShow" @contextMenu="shortcutContextMenu(id,null,$event)" :title="s.title"
                :style="shortcutStyle(id,null)">
                <yl-icon v-if="!s.children" :icon="apps[s.app].icon" :badge="apps[s.app].badge"></yl-icon>
                <div class="icon-drawer" v-if="s.children">
                    <template v-for="(s1, id1) in s.children">
                        <yl-icon :icon="apps[s1.app].icon" :badge="0" class="icon-drawer-pre" :drawer="true"></yl-icon>
                    </template>
                    <div class="badge" v-show="shortcutGetDrawerBadge(id)">{{badgeText(shortcutGetDrawerBadge(id))}}
                    </div>
                </div>
                <div class="title">
                    {{s.title}}
                </div>
            </div>

            <!--抽屉渲染-->
            <transition name="opacity">
                <div class="shader " v-if="shortcuts[drawer]"
                    @mousedown.self="if(Date.now()-runtime.shortcutOpenedAt>500) drawer=null" style="z-index:999999">
                    <div class="drawer">
                        <div class="mask" :style="{background:configs.themeColor}"></div>
                        <div class="title">{{shortcuts[drawer].title}}</div>
                        <div class="shortcut" v-for="(s, id) in shortcuts[drawer].children"
                            :class="shortcutClass(id,s,true)" @mousedown="shortcutMouseDown(id,drawer, $event)"
                            @touchstart="shortcutMouseDown(id,drawer, $event)"
                            @contextMenu="shortcutContextMenu(id,drawer,$event,true)" :title="s.title"
                            :style="{left:s.drag.left+'px',top:s.drag.top+'px'}">
                            <yl-icon v-if="!s.drawer" :icon="apps[s.app].icon" :badge="apps[s.app].badge"></yl-icon>
                            <div class="title">
                                {{s.title}}
                            </div>
                        </div>
                    </div>
                </div>
            </transition>

            <!--窗体渲染-->
            <transition-group name="opacity">
                <div v-for="(w,id) in wins" class="win shadow" :key="id" :id="id" v-show="!winIsMin(id)"
                    @mousedown="winSetActive(id)" :class="winClass(id)" :style="winStyle(id)">
                    <div v-if="!w.plugin&&w.init" class="init"
                        :style="{'background-color':w.icon.bg || configs.themeColor}">
                        <yl-icon :icon="w.icon" :badge="0" :style="winInitIconStyle(id)"></yl-icon>
                        <div class="load-3">
                            <div v-if="!runtime.isSmallScreen" class="k-line2 k-line12-2" style="animation-delay: .7s">
                            </div>
                            <div v-if="!runtime.isSmallScreen" class="k-line2 k-line12-3" style="animation-delay: .6s">
                            </div>
                            <div class="k-line2 k-line12-4" style="animation-delay: .5s"></div>
                            <div class="k-line2 k-line12-5" style="animation-delay: .4s"></div>
                            <div class="k-line2 k-line12-6" style="animation-delay: .3s"></div>
                            <div class="k-line2 k-line12-7" style="animation-delay: .2s"></div>
                            <div class="k-line2 k-line12-8" style="animation-delay: .1s"></div>
                        </div>
                    </div>
                    <div class="bar-box">
                        <div class="bar" :class="{'no-max':w.plugin||!w.resizable}">
                            <div class="mask bar-mask"></div>
                            <div class="mask"
                                :style="{background:w.init?(w.icon.bg || configs.themeColor):configs.themeColor, opacity:w.init?1:0.9}">
                            </div>
                            <!--标题栏-->
                            <div class="title" :title="w.title" @contextMenu="winContextMenu(id,$event)"
                                @dblclick="winTitleDblclick(id)" @mousedown="winTitleMouseDown(id,$event)"
                                @touchstart="winTitleMouseDown(id,$event)">
                                <yl-icon :icon="w.icon"></yl-icon>
                                {{w.title}}
                            </div>
                            <div class="tools">
                                <span style="background-image: url('./res/img/icon/minimize.svg')" class="tool"
                                    @click="winMinimize(id)"></span>
                                <span v-if="!w.plugin&&w.state==='normal'&&w.resizable&&!runtime.isSmallScreen"
                                    style="background-image: url('./res/img/icon/maximize.svg')" class="tool"
                                    @click="winMaximize(id)"></span>
                                <span v-if="!w.plugin&&w.state==='max'&&!runtime.isSmallScreen" class="tool"
                                    style="background-image: url('./res/img/icon/restore.svg')"
                                    @click="winRestore(id)"></span>
                                <span class="tool close" @click="winClose(id)"
                                    style="background-image: url('./res/img/icon/close.svg')"></span>
                                <div style="clear: both"></div>
                            </div>
                            <div style="clear: both"></div>
                        </div>
                        <div v-show="w.addressBar" class="address-bar">
                            <i class="btns fa fa-fw fa-arrow-left" :class="{disable:!YL.child.historyBackAvailable(id)}"
                                @click="YL.child.historyBack(id)"></i>
                            <i class="btns fa fa-fw fa-arrow-right"
                                :class="{disable:!YL.child.historyForwardAvailable(id)}"
                                @click="YL.child.historyForward(id)"></i>
                            <i class="btns fa fa-fw fa-rotate-right" :class="{disable:!w.childSupport}"
                                @click="!w.childSupport||winRefresh(id)"></i>
                            <i class="btns fa fa-fw fa-home" @click="winHome(id)"></i>
                            <input v-model="w.urlBar" spellcheck="false" @keyup.enter="w.url=w.urlBar">
                        </div>
                    </div>

                    <div class="win-drag-placeholder">
                        <div class="mask" style="z-index: 2" v-show="runtime.drag"></div>
                        <iframe :id="w.idIframe" :name="id" class="frm" :src="w.url"></iframe>
                        <div v-show="w.resizable" class="win-resize" @mousedown="winResizeMouseDown(id,$event)"></div>
                        <div class="win-move" @contextMenu="winContextMenu(id,$event)"
                            @mousedown="winTitleMouseDown(id,$event)" @touchstart="winTitleMouseDown(id,$event)"></div>
                    </div>
                </div>
            </transition-group>
            <!--背景图-->
            <div class="background-mask " @click.self="desktopClick" @mousemove.self="desktopMouseMove"
                @mousedown.self="desktopMouseDown" @mouseup.self="desktopMouseUp"
                @contextMenu.self="desktopContextMenu"></div>
            <div class="background" :class="{blur:configs.wallpaperBlur, cross:backgroundCross}"
                :style="{'background-image':'url('+runtime.wallpaper+')'}"></div>
        </div>

        <!--任务栏-->
        <div class="bar" @contextMenu="barContextMenu" :style="barStyle" :class="{top:configs.topTaskBar}">
            <div class="mask" :style="{background:configs.themeColor}"></div>
            <div class="mask" :style="{background:'rgba(0,0,0,0.18)'}"></div>
            <div class="mask powered-by" :class="{fade: runtime.winOpened}">
                Powered by YLUI v{{YL.info.version}}
            </div>
            <!--开始按钮-->
            <div class="btn shadow-hover fa fa-fw" style="width: 36px;"
                :class="[ 'fa-'+YL.info.iconBtnStart, {btnStartOpen: startMenu.open } ]"
                @click="if(startMenu.open){hideOpens();}else{hideOpens();startMenu.open=true} "></div>
            <!--子窗口的按钮-->
            <div class="btn win-task" @click="winTaskClick(id)"
                :class="{active:id===runtime.winActive&&!winIsMin(id),shadow:id===runtime.winActive&&!winIsMin(id)}"
                v-for="(w,id) in wins" v-if="!w.plugin" @contextMenu="winContextMenu(id,$event)"
                :style="{'width':parseInt((runtime.clientSize.width-210+(runtime.isSmallScreen?80:0))/runtime.winOpened)+'px'}">
                <yl-icon :icon="w.icon"></yl-icon>
                <div class="title">{{w.title}}</div>
                <div class="line"></div>
            </div>
            <!--显示桌面-->
            <div id="yl-btn-right-bottom"
                @click="if(smallScreenAndMenuOpend){runtime.menuOnLeft=!runtime.menuOnLeft} else {showDesktop()}"
                :class="{'fa-exchange':smallScreenAndMenuOpend}" class="btn shadow-hover fa fa-fw"></div>
            <!--消息-->
            <div id="yl-btn-center" class="btn shadow-hover " style="float: right" @click="btnCenterClick()">
                <div class="badge" :style="{bottom:configs.topTaskBar?'-18px':'none',top:configs.topTaskBar?'auto':'0'}"
                    v-show="center.unread">{{center.unread>99?'99+':center.unread}}
                </div>
            </div>
            <!--时间-->
            <div class="btn shadow-hover" v-show="!runtime.isSmallScreen" v-html="runtime.time"
                :title="runtime.date && runtime.date.toLocaleString()"
                @click="runtime.CalendarOpen=!runtime.CalendarOpen;runtime.pluginIconsOpen=false;"
                style="font-size: 12px;float: right"></div>
            <!--托盘按钮-->
            <div class="btn shadow-hover fa fa-fw "
                :class="{'fa-angle-up':!configs.topTaskBar,'fa-angle-down':configs.topTaskBar}"
                style="float: right;padding: 0"
                @click="runtime.pluginIconsOpen=!runtime.pluginIconsOpen;runtime.CalendarOpen=false;"></div>
            <!--插件托盘盒子-->
            <transition name="opacity">
                <div class="plugin-icons shadow" v-show="runtime.pluginIconsOpen">
                    <div class="mask" :style="{background:configs.themeColor}"></div>
                    <div class="mask" style="background: white; opacity: 0.04"></div>
                    <div class="plugin-icon" @click="winShowToggle(id)"
                        :class="{active:id===runtime.winActive&&!winIsMin(id)}" v-for="(w,id) in wins" v-if="w.plugin"
                        @contextMenu="winContextMenu(id,$event)" :title="w.title" :style="{opacity:winIsMin(id)?0.6:1}">
                        <yl-icon :icon="w.icon"></yl-icon>
                    </div>
                </div>
            </transition>
            <!--日历盒子-->
            <transition name="opacity">
                <div id="_box_time" @contextMenu="ContextMenu.render($event,true)" class="calendar-box shadow"
                    v-show="runtime.CalendarOpen">
                    <div class="mask" :style="{background:configs.themeColor}"></div>
                    <div class="mask" style="background: white; opacity: 0.02"></div>
                    <div class="_h_m_s div-time"></div>
                    <div class="_y_m_d div-time"></div>
                    <div class="calendar clearfix">
                        <div class="_header">
                            <strong></strong>
                            <span class="aL">
                                << /span>
                                    <span class="aR">></span>
                        </div>
                        <div class="_normal">
                            <div class="_week clearfix"></div>
                            <div class="_days clearfix">
                                <ul class="clearfix"></ul>
                            </div>
                        </div>
                        <div class='_years_months clearfix'>
                            <ul></ul>
                        </div>
                        <div class="_tenyears clearfix">
                            <ul></ul>
                        </div>
                    </div>
                </div>
            </transition>
        </div>

        <!--开始菜单-->
        <transition name="opacity">
            <div class="startMenu shadow"
                :style="{width: runtime.startMenu.width+'px', height: runtime.startMenu.height +'px'}"
                @click="center.open = false;runtime.pluginIconsOpen = false;runtime.CalendarOpen = false;"
                v-show="startMenu.open" :class="{topTaskBar:configs.topTaskBar}">
                <div class="mask" :style="{background:configs.themeColor}"></div>
                <div class="startMenu-resize" @mousedown="startMenuResizeMouseDown($event)"></div>
                <!--左侧边栏-->
                <div class="sidebar" :style="{'background-color': configs.themeColor}"
                    :class="{spread:startMenu.sidebar.open,'shadow-hover':startMenu.sidebar.open}"
                    @mouseleave="startMenu.sidebar.open=false">
                    <div class="mask" style="background-color: white"
                        :style="{opacity: startMenu.sidebar.open ? 0.04 : 0.02}"></div>
                    <div @click="startMenu.sidebar.open=!startMenu.sidebar.open" class="btn">
                        <i class="fa fa-fw fa-align-justify"></i><span class="title">{{YL.lang("Start")}}</span></div>
                    <div class="btn-group">
                        <div v-for="(b, i) in startMenu.sidebar.btns" :title="b.title" class="btn"
                            @contextMenu="sidebarBtnContextMenu(i,$event)" @click="appOpen(b.app,b,b)">
                            <yl-icon :icon="apps[b.app].icon" :badge="apps[b.app].badge" :nobg="true"></yl-icon>
                            <span class="title">{{b.title}}</span>
                        </div>
                    </div>
                </div>

                <!--主菜单-->
                <yl-menu :style="menuStyle" @maincontextmenu="menuMainContextMenu($event)"
                    @itemcontextmenu="menuContextMenu($event)" @itemclick="menuItemClick($event)" :menu="startMenu.menu"
                    :apps="apps">
                </yl-menu>

                <!--磁贴-->
                <div class="tiles-box" @contextMenu="tilesBoxContextMenu($event)" :style="tilesBoxStyle">
                    <div class="tiles-flex-container" :style="{'column-count':runtime.tilesGroupNum}">
                        <div class="tiles" :style="{width: runtime.tilesWidth+'px'}"
                            v-for="(tileGroup,groupIndex) in tiles">
                            <div class="title" @contextMenu="tilesTitleContextMenu(groupIndex,$event)">
                                {{tileGroup.title}}
                                <i @click="shortSetting=tileGroup" class="fa fa-navicon tip"></i>
                            </div>
                            <grid-layout :layout="tileGroup.data" :col-num="6" :row-height="runtime.tileSize"
                                :is-draggable="true" :is-resizable="true" :vertical-compact="true" :margin="[4,4]"
                                :use-css-transforms="false" :autoSize="false">
                                <grid-item v-for="(tile,i) in tileGroup.data" @moved="tileMoved" :x="tile.x" :y="tile.y"
                                    :w="tile.w" :h="tile.h" :i="tile.i">
                                    <div class="tile animated zoomIn"
                                        :style="{'animation-duration': '0.3s', 'animation-delay': Math.random()/8+'s'}"
                                        :title="tile.title" @mousedown="tileMouseDown($event)" @click="tileClick(tile)"
                                        @contextMenu="tileContextMenu(groupIndex,i,$event)">
                                        <div class="mask" style="opacity:0.85"
                                            :style="{'background-color':apps[tile.app].icon.bg}">
                                            <div class="badge" v-show="apps[tile.app].badge">
                                                {{badgeText(apps[tile.app].badge)}}
                                            </div>
                                            <iframe class="custom-tile" v-if="apps[tile.app].customTile" frameborder="0"
                                                scrolling="no" hspace="0" :src="tileSrcCustom(apps[tile.app])"></iframe>
                                            <yl-icon v-else :icon="apps[tile.app].icon" :badge="0"
                                                :style="tileStyle(tile)"></yl-icon>
                                            <div v-show="Math.min(tile.w,tile.h)*runtime.tileSize>80" class="title">
                                                {{tile.title}}
                                            </div>
                                        </div>
                                        <!--<div class="mask" style="opacity: 0.3;background-color: white"></div>-->
                                    </div>
                                </grid-item>
                            </grid-layout>
                        </div>
                    </div>
                </div>
            </div>
        </transition>

        <!--操作中心-->
        <div class="center shadow" :class="{open:center.open}" :style="centerStyle">
            <div class="mask" :style="{background:configs.themeColor}"></div>
            <div class="banner">{{YL.lang("NoticeCenter")}}
                <div class="clear" v-show="center.msgNum>0" @click="btnCenterClear">{{YL.lang("NoticeClearAll")}}</div>
            </div>
            <transition name="custom-classes-transition-msg" enter-active-class="animated slideInRight"
                leave-active-class="animated slideOutRight">
                <div style="animation-duration: 0.5s" class="banner no-msg" v-show="center.msgNum<=0">
                    {{YL.lang("NoMoreNotice")}}
                </div>
            </transition>
            <div class="msgs">
                <transition-group name="custom-classes-transition-msg" enter-active-class="animated bounceInRight"
                    leave-active-class="animated bounceOutRight">
                    <div v-for="(m,id) in center.msg" class="msg shadow-hover" :key="id">
                        <div class="title">{{m.title}}
                            <div class="btn-close" @click="msgClose(id)"><i class="fa fa-trash"></i></div>
                        </div>
                        <div class="content selectable" v-html="m.content"></div>
                    </div>
                </transition-group>
            </div>
        </div>
        <!--快捷方式配置-->
        <transition name="opacity">
            <div class="shader" v-if="shortSetting"
                @click.self="shortSetting=null;runtime.shortcutNewParamName='',runtime.shortcutNewParamValue=''"
                :style="{'z-index':19930005}">
                <div class="drawer">
                    <div class="mask" :style="{background:configs.themeColor}"></div>
                    <div class="title">{{shortSetting.title}}<span v-if="shortSetting.app" class="btn-advance"
                            @click="btnShortSettingAdvanceClick(shortSetting.app)">{{YL.lang("Advance")}}</span>
                    </div>
                    <div class="line" :style="{'margin-top':shortSetting.params?0:'64px'}">
                        <span>{{YL.lang("Title")}}</span> <input spellcheck="false" autofocus
                            v-model="shortSetting.title" />
                    </div>
                    <template v-if="shortSetting.params">
                        <div class="line">
                            <span>{{YL.lang("Hash")}}</span> <input spellcheck="false" v-model="shortSetting.hash" />
                        </div>
                        <div class="line">
                            <input spellcheck="false" :placeholder="YL.lang('Key')"
                                v-model="runtime.shortcutNewParamName" />
                            <input spellcheck="false" :placeholder="YL.lang('Value')"
                                v-model="runtime.shortcutNewParamValue" />
                            <i class="fa fa-plus-circle" @click="shortSettingParamsAdd"></i>
                        </div>
                        <div v-for="(val,name) in shortSetting.params" class="line">
                            <span :title="name">{{name}}</span>
                            <input spellcheck="false" v-model="shortSetting.params[name]" />
                            <i class="fa fa-minus-circle" @click="shortSettingParamsDelete(name)"></i>
                        </div>
                    </template>
                </div>
            </div>
        </transition>
        <!--消息预览-->
        <transition-group name="custom-classes-transition-msg" enter-active-class="animated bounceInRight"
            leave-active-class="animated bounceOutRight">
            <div v-for="(msg,id) in msgPres" class="msg-attention animated" :key="msg.key" @click="center.open = true"
                :style="{bottom: msg.index*180+40+'px'}" v-if="msg">
                <div class="mask" :style="{background:configs.themeColor}"></div>
                <div class="title">{{msg.title}}</div>
                <div class="content selectable" v-html="msg.content"></div>
                <div class="mask-msg"
                    :style="{background: 'linear-gradient(to top,'+configs.themeColor+','+configs.themeColor+' 50%,transparent)'}">
                </div>
            </div>
        </transition-group>
    </div>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('sw.js?v=2.1')
                    .then(reg => {
                        console.log('Service worker registered! 😎', reg);
                    })
                    .catch(err => {
                        console.log('😥 Service worker registration failed: ', err);
                    });
            });
        }
    </script>
</body>

</html>